<template>
  <view class="container">
    <myNavigation ref="navBar"></myNavigation>
    <view class="dishes-list">
      <view class="collection_title" :class="{ hidden: !isHeaderVisible }">共收藏<text
          class="collection_num">&nbsp;{{collectionInfo.favoriteNum}}&nbsp;</text>道菜谱</view>
      <scroll-view :scroll-y="true" class="scroll_box" @scroll="handleScroll" v-if="curUserId!==''">
        <block v-for="(item, index) in collectionInfo.recipeInfoList" :key="index">
          <view class="dish-item" @tap.stop="toMenuInfoPage(item)">
            <image :src="item.imageUrl" class="dish-image" mode="aspectFill" />
            <view class="dish-info">
              <text class="collection-date">收藏于{{item.createdAt}}</text>
              <text class="dish-name">{{ item.title }}</text>
              <text class="dish-score">评分：{{ item.rating }}分</text>
              <text class="favoritesNum">{{item.favoriteNum}}人收藏</text>
              <text class="dish-people">{{item.opusNum}}人做过</text>
              <text class="dish-author">作者：{{ item.userName }}</text>
            </view>
          </view>
        </block>
        <view class="bottom_box" v-if="collectionInfo.recipeInfoList.length">~~到底了~~</view>
        <view class="bottom_box" v-if="collectionInfo.recipeInfoList.length===0">您暂未有收藏哦~</view>
      </scroll-view>
      <LoginTip ref="loginTip" v-if="!isLogin"></LoginTip>

    </view>

  </view>

</template>

<script setup>
  import { ref, onMounted, inject, } from 'vue';
  import Taro, { useDidShow } from '@tarojs/taro';
  import './collection.scss';
  import LoginTip from "../../components/LoginTip.vue";
  import myNavigation from "../../components/myNavigation.vue";

  // 注入配置
  const config = inject('config');
  const baseUrl = config.baseUrl; // 从全局配置中读取 baseUrl


  // 隐藏和显示标签页头部(上滑下滑控制)
  const isHeaderVisible = ref(true);
  const lastScrollTop = ref(0);
  const headerHeight = ref(20);
  const handleScroll = (e) => {
    const currentScrollTop = e.detail.scrollTop;
    if (currentScrollTop > lastScrollTop.value) {
      // 向下滚动
      isHeaderVisible.value = false;
    } else {
      // 向上滚动
      isHeaderVisible.value = true;
    }
    lastScrollTop.value = currentScrollTop <= 0 ? 0 : currentScrollTop;
  }



  const collectionInfo = ref({
    favoriteNum: 0,
    recipeInfoList: [
      {
        recipeId: 1,
        imageUrl: "https://i2.chuimg.com/d90b864d6dfb49c99ab0c69a94ce62ae_1280w_720h.jpg?imageView2/2/w/660/interlace/1/q/75",
        title: "波兰种牛奶餐包",
        rating: "8.9",
        createdAt: "2024-11-14 17:43:19",
        favoriteNum: "1",
        opusNum: "0",
        userName: "一只汐呀"
      }
    ]
  })



  // 跳转菜谱详细页面
  const toMenuInfoPage = (item) => {
    console.log('Item clicked:', item); // 添加这行来调试
    Taro.navigateTo({
      url: `../detail/menuInfo/menuInfo?userId=${curUserId.value}&recipeId=${item.recipeId}`
    });
  };
  const navBar = ref(null);

  const navigationHome = () => {
    Taro.switchTab({
      url: '../index/index',
    });
  };

  const setNavBar = () => {
    if (navBar.value) {
      navBar.value.navigationHome = navigationHome;
      navBar.value.navigationTitle = "收藏";
    }
  };

  const getCollectionInfo = () => {
    if (curUserId.value === '') return
    Taro.request({
      url: `${baseUrl}/favorite/getUserFavoriteInfo?userId=${curUserId.value}`,
      success: (res) => {
        collectionInfo.value = res.data.data;
      }
    })
  }


  //跳转到登录界面
  const toLoginPage = () => {
    Taro.navigateTo({
      url: `../detail/login/login`,
    })
  }
  const loginTip = ref(null);
  // 判断用户是否登录
  const isLogin = ref(false);
  function getIsLogin() {
    if (loginTip.value !== null) loginTip.value.toLoginPage = toLoginPage;
    isLogin.value = !(curUserId.value === "");
    if (!isLogin.value) {
      loginTip.value.isHidden = false;
      return true
    } else return false;
  }

  // 存放当前登录用户
  const curUserId = ref('');

  Taro.useDidShow(() => {
    curUserId.value = Taro.getStorageSync('userId')
    getIsLogin();
    getCollectionInfo();
  })

  onMounted(() => {
    // getCollectionInfo();
    setNavBar();
  });
</script>

<style lang="scss" scoped>
</style>